<template>
  <div>
    <div class="top">
      <div class="btn-item">
        <el-button type="primary" round icon="el-icon-folder">
          保存并关闭
        </el-button>
        <el-button type="primary" round icon="el-icon-folder-add" @click="submitForm">
          保存并新建
        </el-button>
        <el-button type="primary" round icon="el-icon-document-add">
          保存并复制
        </el-button>
        <el-button type="danger" round icon="el-icon-folder-delete">
          取消
        </el-button>
      </div>
    </div>
    <!-- <div v-html="html">{{html}}</div> -->
  </div>
</template>

<script>
import {
  listPage,
  getPage,
  delPage,
  addPage,
  updatePage,
} from "@/views/UDform/js/page";
import { addPageValue } from "@/views/UDform/js/pageValue";
export default {
  components: {},
  name: "NewInterfase",
  data() {
    return {
      html: "",
      formData: {},
      codeList: [],
      pageId: "",
    };
  },
  created() {
    this.pageId = this.$route.query.pageId;
    // 防止 firefox 下 拖拽 会新打卡一个选项卡
    document.body.ondrop = (event) => {
      event.preventDefault();
      event.stopPropagation();
    };
    this.getPage(this.pageId);
    console.log("html=" + this.html);
  },
  methods: {
    showHtml: function (str) {
      return str
        .replace(str ? /&(?!#?\w+;)/g : /&/g, "&amp;")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'");
    },
    getPage(id) {
      getPage(id).then((response) => {
        // this.form = response.data;
        // this.open = true;
        // this.title = "修改页面自定义";
        this.html = this.showHtml(response.data.webPageCode);
        var fieldList = response.data.fieldList;
        for (var i = 0; i < fieldList.length; i++) {
          this.codeList.push(fieldList[i].code);
        }
      });
    },
    submitForm() {
      for (var i = 0; i < this.codeList.length; i++) {
        if (null != document.getElementById(this.codeList[i])) {
          this.formData[this.codeList[i]] = document.getElementById(
            this.codeList[i]
          ).value;
        }
      }
      console.log(this.formData, "formData");
      var data = {};
      data.map = this.formData;
      data.table = this.pageId;
      addPageValue(data).then((response) => {
        console.log(response, "response");
        if (response.code == 200) {
          this.msgSuccess("新增成功");
        }
      });
    },
  },
};
</script>

<style scoped>
.top {
  position: initial;
  top: 0;
  left: auto;
  right: 0;
  background-color: lightslategray;
  display: flex;
}
.btn-item {
  padding: 10px 0px;
}
el-button {
  flex: 1;
}
</style>
